<template>
	<div class="airdrop">
		<img class="head" src="/images/9.jpg" alt="" />
		<div class="top">
			<p>Points are airdropped every Friday and will have future uses in</p>
			<p><span>SQ</span>.web3</p>
		</div>
		<div class="content">
			<p class="label">Your points</p>
			<p class="money">0</p>
			<p class="label">Your rank</p>
			<button>UNRANKED</button>
			<p class="label">Invite a Friend</p>
			<div class="list">
				<div class="item flex-b-c">
					<p>ft-9jpyermy</p>
					<el-icon>
						<CopyDocument />
					</el-icon>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { CopyDocument } from "@element-plus/icons";
</script>

<style scoped lang="scss">
.airdrop {
	.head {
		width: 120px;
		height: 120px;
		display: block;
		margin: 0 auto;
		background: #efefef;
	}

	.top {
		text-align: center;
		padding: 30px 0 20px;
		color: #666666;
	}

	.content {
		.label {
			font-size: 14px;
			color: #999999;
			margin: 30px 0 20px;
		}

		.money {
			font-size: 22px;
		}

		button {
			width: 120px;
			height: 40px;
			border-radius: 10px;
		}

		.item {
			width: 300px;
		}
	}
}
</style>
